<template>
  <BasicModal width="450px" v-bind="$attrs" title="批量设置分组与选题" @register="registerModal" @ok="handleSubmit">
    <BasicForm @register="registerForm" />
  </BasicModal>
</template>

<script lang="ts" setup>
import { computed} from 'vue'
import { BasicModal, useModalInner } from '@/components/Modal'
import { BasicForm, useForm } from '@/components/Form'
import { batchUpdateGroup } from '@/api/train/detail.ts'
import { message } from 'ant-design-vue'

const props = defineProps({
  groupOptions: {
    type: Array,
    default: () => {
      return []
    },
  },
  questionOptions: {
    type: Array,
    default: () => {
      return []
    },
  },
  selectList:{
    type: Array,
    default: () => {
      return []
    },
  }
})

const groupOptions = computed(()=>{
    return props.groupOptions
})

const questionOptions = computed(()=>{
    return props.questionOptions
})

const [registerForm, { resetFields, setFieldsValue, updateSchema, validate }] = useForm({
  labelWidth: 80,
  baseColProps: { span: 24 },
  schemas: [
    {
      field: 'group',
      label: '小组：',
      component: 'Select',
      componentProps: {
        options: groupOptions,
      },
      rules: [
        {
          required: true,
          message: '请选择小组',
        },
      ],
    },
    {
      field: 'questions',
      label: '选题：',
      component: 'Select',
      componentProps: {
        options: questionOptions,
      },
      rules: [
        {
          required: true,
          message: '请选择选题',
        },
      ],
    },
  ],
  showActionButtonGroup: false,
})

const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
  resetFields()
  setModalProps({ confirmLoading: false })
})

const emit = defineEmits(['success', 'register'])
async function handleSubmit() {
    const values = await validate()
    setModalProps({ confirmLoading: true })
    try {
      const { group,questions } = values
      let params = {
        group, // 小组
        questions,   // 选题
        resumesIds: props.selectList.map((v:any) => v.resumesId),   // 简历id
      }
      const res = await batchUpdateGroup(params)
      if(res.code == '10000'){
        emit('success', values)
        closeModal()
      }else{
        message.error(res.msg)
      }
    } finally {
      setModalProps({ confirmLoading: false })
      setModalProps({ confirmLoading: false })
    }
  }
</script>